<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="../../assets/css/style.css">
  <link rel="stylesheet" href="../../build/common/base.css">


  <link rel="stylesheet" href="../../build/form/form.css">
  <link rel="stylesheet" href="../../build/form/page.css">
  <link rel="stylesheet" href="../../build/form/preview.css">


  <link rel="stylesheet" href="../../assets/js/common/element/index.css">
  <script type="text/javascript" src="../../build/common/base.js"></script>
  <script type="text/javascript" src="../../build/common/vueEdit.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    li {
      list-style: none
    }

    img {
      vertical-align: top;
      border: none
    }

    .rev_file {
      width: 53px;
      height: 33px;
      position: relative;
    }

    .btn_rev {
      width: 100%;
      height: 100%;
      position: absolute;
    }

    .fun_box {
      display: flex;
      margin: 15px;

    }

    .my_btns {
      margin-left: 15px;
      width: 53px;
      height: 33px;
    }

    .title {
      border-bottom: 1px #ccc dashed;
      text-align: center;
      font-size: 20px;
      padding-bottom: 20px;
      padding-top: 20px;
      margin-bottom: 20px;
    }

    .execl_box {
      margin: 0 auto;
      padding: 20px;
      margin-bottom: 60px;
    }

    .btn_box {
      display: flex;
      margin-bottom: 20px;
    }

    .btn_file_box {
      position: relative;
      margin-right: 5px;
    }

    .file_up {
      position: absolute;
      top: 0;
    }

    #importUrl {
      z-index: 999;
      opacity: 0;
    }

    .my_name {
      max-width: 230px;
      margin-bottom: 20px;
      margin-left: 8px;
      border-radius: 5px;
    }

    .tab_th tbody th {
      text-align: right;
    }

    .my_table thead th {
      white-space: nowrap;
    }

    /* input[type=file] {
      display: none;
    } */
    .uplad_box input[type=file] {
      display: none;
    }

    .no_data {
      width: 100%;
      padding: 8px;
      background-color: #f9f9f9;
      text-align: center;

    }

    #barcon {
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 16px;
    }

    /* #barcon a {
      
    } */
  </style>
</head>

<body>


  <div id="app" style="padding: 30px;">

    <el-cascader @change="handData" :change-on-select="true" :props="defaultParams" :options="options"
      v-model="selectedOptions">
    </el-cascader>

  </div>








  <script src="../../assets/js/common/element/index.js"></script>
  <script>


    function goPage(pno, psize) {
      var itable = document.getElementById("idData");
      console.log("wwww", itable)
      var num = itable.rows.length;//表格所有行数(所有记录数)
      console.log(num);
      var totalPage = 0;//总页数
      var pageSize = psize;//每页显示行数
      //总共分几页 
      if (num / pageSize > parseInt(num / pageSize)) {
        totalPage = parseInt(num / pageSize) + 1;
      } else {
        totalPage = parseInt(num / pageSize);
      }
      var currentPage = pno;//当前页数
      var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行  31 
      var endRow = currentPage * pageSize;//结束显示的行   40
      endRow = (endRow > num) ? num : endRow; 40
      console.log(endRow);
      //遍历显示数据实现分页
      for (var i = 1; i < (num + 1); i++) {
        var irow = itable.rows[i - 1];
        if (i >= startRow && i <= endRow) {
          // irow.style.display = "block";
          $(irow).show()
        } else {
          $(irow).hide()
          // irow.style.display = "none";
        }
      }
      var pageEnd = document.getElementById("pageEnd");
      var tempStr = "共" + num + "条记录 分" + totalPage + "页 当前第" + currentPage + "页";
      if (currentPage > 1) {
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPage(" + (1) + "," + psize + ")\">首页</a>";
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一页</a>"
      } else {
        tempStr += "首页";
        tempStr += "<上一页";
      }

      if (currentPage < totalPage) {
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页></a>";
        tempStr += "<a style='padding: 6px;' href=\"#\" onClick=\"goPage(" + (totalPage) + "," + psize + ")\">尾页</a>";
      } else {
        tempStr += "下一页>";
        tempStr += "尾页";
      }

      document.getElementById("barcon").innerHTML = tempStr;

    }
    var vm = new Vue({
      el: "#app",
      data: {
        options: [],
        selectedOptions: [],
        defaultParams: {
          label: 'name',
          value: 'id',
          children: 'childsList'
        },
        tableData: [],
        surbeyObj: "",
        id: "",
        rwid: "",
        fileList: [],
        exList: [],
        loading: Number,
        ids: "",
        bzTxt: "",
        url: "http://127.0.0.1:18084/project/uploadOne/",
        projectbudget: {
          code: "",
          registerTime: "",
          OnlyID: "",
          bz: "",
          projectName: "",
          userName: "",
          BudgetName: ""
        },
        yusuandanTxt: ""
      },
      mounted() {
        // var that = this
        // $.ajax({
        //   url: "http://127.0.0.1:18084/sys/matecode/findAll",
        //   type: "get",
        //   dataType: "json",
        //   // traditional: true,
        //   async: false,
        //   success: function (res) {
        //     that.options = that.getTreeData(JSON.parse(res))
        //     console.log("级联==>>", JSON.parse(res))
        //   }
        // })
        var that = this
        var url = "http://127.0.0.1:18084/sys/matecode/findAll"
        var post = Vue.baseService.get(url);
        post.then(function (res) {
          that.options = that.getTreeData(JSON.parse(res))
          // that.surbeyObj = res
        }, function (status) {
          if (status == !0) {
            $.Toast.error('加载失败！' + status);
          }
        })


        // this.rwid = location.search.replace("?", "")
        // var that = this
        // var url = "http://127.0.0.1:18084/sys/procurementplanning/getinfo"
        // var post = Vue.baseService.post(url);
        // post.then(function (res) {
        //   that.tableData = res
        //   console.log(that.tableData, "新建采购规划")
        //   // that.surbeyObj = res
        // }, function (status) {
        //   if (status == !0) {
        //     $.Toast.error('加载失败！' + status);
        //   }
        // })
      },
      methods: {
        handData(data) {
          console.log("data==>>>", data)
        },
        getTreeData(data) {
          // 循环遍历json数据
          for (var i = 0; i < data.length; i++) {

            if (data[i].childsList.length < 1) {
              // children若为空数组，则将children设为undefined
              data[i].childsList = undefined;
            } else {
              // children若不为空数组，则继续 递归调用 本方法
              this.getTreeData(data[i].childsList);
            }
          }
          return data;
        },
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
          // if (rowIndex % 2 === 0) {
          //   if (columnIndex === 0) {
          //     return [1, 2];
          //   } else if (columnIndex === 1) {
          //     return [0, 0];
          //   }
          // }
        },
        handclos: function () {
          var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
          parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
          parent.layer.close(index);
        },

      },
      watch: {

      }
    })






  </script>
</body>

</html>